<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main>
				<div class="top">
					<h4>分类设置</h4>
				</div>
				<p style="margin-left: 20px;">分类模板</p>
				<el-form :model="formData" label-width="auto" style="max-width: 600px;margin-left: 100px;">
					<el-form-item label="分类类型" :model="formData" >
						  <el-radio-group v-model="formData.confLevel" @change="select">
							<el-radio value="1级">一级分类</el-radio>
							<el-radio value="2级">二级分类</el-radio>
						  </el-radio-group>
					</el-form-item>
					<el-form-item label="分类模板" >
						<div :class="{selected:formData.confLevel=='1级'}" @click="formData.confLevel='1级'">
							<img src="../../public/fenlei1.png"/>
						</div>
						<div :class="{selected:formData.confLevel=='2级'}" @click="formData.confLevel='2级'">
							<img src="../../public/fenlei2.png"/>
						</div>
					</el-form-item>
					<p style="margin-left: -80px;">页面设置</p>
					<el-form-item label="页面名称" prop="pageName">
					  <el-input  v-model="formData.pageName"
							show-word-limit maxlength="10" style="width: 300px;"/>
					</el-form-item>
					<el-form-item label="搜索栏">
						  <el-radio-group  v-model="formData.confStatus">
							<el-radio value="是">开启</el-radio>
							<el-radio value="否">关闭</el-radio>
						  </el-radio-group>
					</el-form-item>
					<el-form-item label="搜索栏文字" prop="confSearch">
					  <el-input  v-model="formData.confSearch"
							show-word-limit maxlength="12" style="width: 300px;"/>
					</el-form-item>
					<el-form-item label="购物车显示">
						  <el-radio-group  v-model="formData.shopStatus">
							<el-radio value="显示">显示</el-radio>
							<el-radio value="隐藏">隐藏</el-radio>
						  </el-radio-group>
					</el-form-item>
					<el-form-item label="购物车样式" >
						<div 
						style="border: 1px solid #959595;margin-right: 15px;height: 50px;" 
						:class="{selectedStyle:selectedImage == 'img1'}"
						@click="selectImage('img1')"
						>
							<img src="../../public/gou1.png" style="width: 50px;"/>
						</div>
						<div 
						style="border: 1px solid #959595;margin-right: 15px;height: 50px;" 
						:class="{selectedStyle:selectedImage == 'img2'}"
						@click="selectImage('img2')"
						>
							<img src="../../public/gou2.png"  style="width: 50px;"/>
						</div>
						<div
						style="border: 1px solid #959595;height: 50px;"
						:class="{selectedStyle:selectedImage == 'img3'}"
						@click="selectImage('img3')"
						>
							<img src="../../public/gou3.png"  style="width: 50px;"/>
						</div>
					</el-form-item>
					<el-form-item label=" " prop="shopScript">
					  <el-input   v-model="formData.shopScript"
							show-word-limit maxlength="3" style="width: 300px;"/>
					</el-form-item>
					<el-form-item label="点击按钮">
						  <el-radio-group  v-model="formData.shopButton">
							<el-radio value="跳转商品详情">跳转商品详情</el-radio>
							<el-radio value="加入购物车">加入购物车</el-radio>
						  </el-radio-group>
					</el-form-item>
					  
					<el-form-item>
						<el-button :plain="true" @click="Save" type="primary">保存</el-button>
					</el-form-item>
				</el-form>
			</el-main>
	    </el-container>
	</div>
</template>

<script setup>
	import {reactive,ref,onMounted} from 'vue';
	import { useRouter,useRoute } from 'vue-router';
	import {useCounterStore} from "../stores/counter"
	import Header from "@/components/Header.vue"
	import {QueryClassSet,UpdateClassSet} from "@/api"
	import { uploadUrl,baseUrl } from "@/utils/request";
	import { Plus } from '@element-plus/icons-vue';
	import { ElMessage } from 'element-plus'
	
	let router = useRouter();
	let counter = useCounterStore();

	let formData = reactive({
		siteId:1,
		confName:"一级分类",
		confLevel:"1级",
		pageName:"商品分类",
		confStatus:"否",
		confSearch:"请搜索您想要的商品",
		shopStatus:"显示",
		shopScript:"购买",
		shopButton:"跳转商品详情",
		
	})
	
	// 保存
	const Save=async ()=>{
		let res=await UpdateClassSet(formData)
		// console.log(res)
		ElMessage.success(res)
		// tableData.value=res.serviceList
		// total.value=res.pageCount
	}
	
	// const Save = () => {
	//   ElMessage.success('Oops, this is a error message.')
	// }
	let flag=ref(1);
	const select=(index)=>{
		flag.value=index
	}
	
	// 点击图片
	let selectedImage=ref("img1");
	const selectImage=(imgId)=>{
		selectedImage.value=imgId;
	}
	
	onMounted(()=>{
		// queryClassSet()
	})
</script>

<style  lang="less" scoped>
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.el-input{
				width:200px;
			}
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
		}
	}
	
	.active {
	  border: 1px solid red;
	}

	.selected{
		border:1px solid blue;
	}
	
	:deep(.selectedStyle){
		border: 1px solid blue !important;
	}
</style>